﻿<div class="zui-pageContent">
    <div class="zui-doc">
        <h3 class="page-header">演示</h3>
        <p>
            <dt class="heading">描述:
                <div class="description">
                    <ul>
                        <li>1,支持本地数据和服务器数据(配置data或者url)</li>
                        <li>2,支持排序和分页(包括Javascript排序和分页)</li>
                        <li>3,支持列的“显示/隐藏”</li>
                        <li>4,支持明细行(表格内嵌)</li>
                        <li>5,支持汇总行</li>
                        <li>6,支持单元格模板</li>
                        <li>7,支持编辑表格(ligerGrid的一个特色,需要其他表单插件的支持)</li>
                        <li>8,支持树表格</li>
                        <li>8,支持分组</li>
                        <li>8,支持多表头&nbsp;</li></ul>
                </div>
            </dt>
        </p>
        <h3>示例</h3>
        <pre>
&lt;div class=&quot;liger-treegrid&quot; id=&quot;treegrid1&quot; data=&quot;CustomersData&quot; enabledEdit=&quot;true&quot;&gt;
    &lt;ul class=&quot;liger-treegrid-columns&quot;&gt;
        &lt;li name=&quot;CustomerID&quot; width=&quot;200&quot;&gt;CustomerID 
            &lt;input class=&quot;liger-treegrid-editor&quot; ltype=&quot;text&quot; /&gt;
        &lt;/li&gt;
        &lt;li name=&quot;CompanyName&quot; width=&quot;200&quot;&gt;CompanyName
            &lt;input class=&quot;liger-treegrid-editor&quot; ltype=&quot;date&quot; data-property=&quot;type:'checkbox'&quot; /&gt;
        &lt;/li&gt;
        &lt;li display=&quot;Address&quot;&gt;
            &lt;ul class=&quot;liger-treegrid-columns&quot;&gt;
                &lt;li name=&quot;City&quot; width=&quot;100&quot;&gt;City&lt;/li&gt;
                &lt;li name=&quot;Address&quot; width=&quot;100&quot;&gt;Address&lt;/li&gt;
                &lt;li name=&quot;PostalCode&quot; width=&quot;100&quot;&gt;PostalCode&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/li&gt;
    &lt;/ul&gt;
    &lt;div class= &quot;liger-treegrid-detail&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
        </pre>
    </div>
</div>
<div class="zui-pageFooter">
    <ul>
        <li><button type="button" class="btn-close" data-icon="close">关闭</button></li>
    </ul>
</div>